<template>
  <div class="storage-table-container" :style="{ height: containerHeight }">
    <el-table
      :data="tableData"
      :border="border"
      :size="size"
      :height="tableHeight"
      :class="['storage-table', customClass]"
      v-bind="$attrs"
    >
      >
      <!-- 动态渲染列配置 -->
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column
          :align="column.align || 'center'"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :show-overflow-tooltip="column.showTooltip || true"
        >
          <!-- 支持自定义列内容插槽 -->
          <template #default="scope" v-if="column.slot">
            <slot :name="column.slot" :scope="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "StorageTable",
  props: {
    // 表格数据（必传）
    tableData: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 列配置（默认使用原有4列，支持自定义）
    columns: {
      type: Array,
      default: () => [
        { prop: "position", label: "位置号", width: 100 },
        { prop: "orderNo", label: "订单号", width: 120 },
        { prop: "listNo", label: "清单号", width: 120 },
        { prop: "element", label: "图号/管段号", width: 120 },
      ],
    },
    // 容器高度（支持数字/字符串，如 300、'19rem'）
    containerHeight: {
      type: [Number, String],
      default: "19rem",
    },
    // 表格高度（默认自适应容器，可自定义）
    tableHeight: {
      type: [Number, String],
      default: "100%",
    },
    // 是否显示边框
    border: {
      type: Boolean,
      default: true,
    },
    // 表格尺寸（small / medium / large）
    size: {
      type: String,
      default: "small",
    },
    // 自定义类名（用于额外样式扩展）
    customClass: {
      type: String,
      default: "",
    },
  },
  inheritAttrs: false, // 避免非 props 属性透传到根元素
};
</script>

<style lang="less" scoped>
.storage-table-container {
  width: 100%;
  overflow: hidden;

  .storage-table {
    width: 100%;
    position: relative;
    overflow: hidden;

    // 隐藏滚动条
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    // 表格内容样式
    ::v-deep .el-table__body {
      -webkit-border-vertical-spacing: 2px; // 行间距
    }

    // 表头样式
    ::v-deep .el-table__header .el-table__cell {
      cursor: default;
      pointer-events: none;
      background-color: rgba(0, 0, 0, 0.2); // 表头半透明背景
    }
    ::v-deep .el-table th.is-leaf {
      border-right: none;
      border-bottom: none;
    }
    ::v-deep .el-table th.el-table__cell > .cell {
      color: #fff;
      font-weight: 500;
    }

    // 单元格样式
    ::v-deep .el-table tr {
      background-color: transparent !important;
    }
    ::v-deep .el-table--enable-row-transition .el-table__body td,
    ::v-deep .el-table .cell {
      background-color: transparent;
      color: #fff;
      line-height: 20px;
    }
    ::v-deep .el-table td.el-table__cell div {
      line-height: 20px !important;
    }

    // 边框样式清除
    ::v-deep .el-table::before {
      height: 0; // 去除底部线
    }
    ::v-deep .el-table--border::after {
      width: 0; // 去除右侧线
    }
    ::v-deep .el-table__body-wrapper .el-table__row td {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1); // 行分隔线
    }
  }
}
</style>